<template>
  <div>
    <!-- 头部 -->
    <div class="header">
      <!-- 搜索 -->
      <el-input placeholder="查询商品" v-model="input" class="addInput" clearable></el-input>


      <!-- 添加 -->
      <el-button type='primary' @click="search">查询</el-button>
      <el-button type='primary' @click="add">添加</el-button>
    </div>
    <!-- 表格 -->
    <el-table :data="tables" style="width: 100%" stripe>
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column type="index" label="ID"> </el-table-column>
      <el-table-column prop="name" label="商品名称"></el-table-column>
      <el-table-column prop="price" label="商品价格"></el-table-column>
      <el-table-column prop="number" label="商品数量"></el-table-column>
      <el-table-column label="操作" width="150px">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>>
    </el-table>
    <!-- 分页 -->
    <el-pagination small layout="total,prev, pager, next" :total="1000" :page-size="10">
    </el-pagination>


    <el-dialog title="商品信息" :visible.sync="dialogFormVisible">
      <!-- 在el-dialog中进行嵌套el-form实现弹出表格的效果 -->
      <el-form :model="form">
        <el-form-item label="名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="价格" :label-width="formLabelWidth">
          <el-input v-model="form.price" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="数量" :label-width="formLabelWidth">
          <el-input v-model="form.number" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <!-- 设置触发更新的方法 -->
        <el-button type="primary" @click="update">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="商品信息" :visible.sync="dialogFormVisible2">
      <!-- 在el-dialog中进行嵌套el-form实现弹出表格的效果 -->
      <el-form :model="form">
        <el-form-item label="名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="价格" :label-width="formLabelWidth">
          <el-input v-model="form.price" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="数量" :label-width="formLabelWidth">
          <el-input v-model="form.number" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <!-- 设置触发更新的方法 -->
        <el-button type="primary" @click="editUser">保存</el-button>
      </div>
    </el-dialog>



  </div>
</template>

<script>
  export default {
    name: 'GoodsList',
    data() {
      return {
        input: '',
        tableData: [{
            name: 'apple',
            price: '100',
            number: '13',
          },
          {
            name: 'cake',
            price: '121',
            number: '1',
          },
          {
            name: 'grape',
            price: '23',
            number: '11',
          },
          {
            name: 'egg',
            price: '30',
            number: '10',
          },
          {
            name: 'milk',
            price: '150',
            number: '30',
          },
          {
            name: 'watermelon',
            price: '25',
            number: '5',
          },
        ],
        form: {},
        dialogFormVisible: false,
        dialogFormVisible2: false,
        value6: "",
        currentPage3: 1,
        currentIndex: ""
      }
    },
    methods: {
      getTable() {
        //发出请求
        axios.get(`/tablist`).then(res => {
          //请求成功
          console.log(res);
          let {
            code,
            result
          } = res.data;
          if (code == '200') {
            this.tableData = result;
          }
          this.tableData = res.data.result;
        }, err => {
          //请求失败
          console.log(err);
        })
      },
      mounted() {
        this.getTable();
      },

      search() {
        console.log("SFDS", this.input);
      },

      add() {
        this.form = {
          name: "",
          price: "",
          number: ""
        };
        //   设置点击按钮之后进行显示对话框
        this.dialogFormVisible = true;
      },

      update() {
        if (!((!/\d/.test(this.form.name)) && (/\d/.test(this.form.price)) && (/\d/.test(this.form.number)))) {
          this.$message({
            message: '数据异常，名称里不能出现数字，价格、数量里只能出现数字，并且输入框不能为空！',
            type: 'waring'
          });
        } else {
          //   将我们添加的信息提交到总数据里面
          this.tableData.push(this.form);
        }
        this.dialogFormVisible = false;
      },
      //编辑数据
      editUser(form, index) {
        this.index = index;
        if (!((!/\d/.test(this.form.name)) && (/\d/.test(this.form.price)) && (/\d/.test(this.form.number)))) {
          this.$message({
            message: '数据异常,请重新编辑信息！',
            type: 'waring'
          });
        }
        else{
           this.form = {
               name: form.name,
               price: form.price,
               number: form.number,
           };
           this.dialogFormVisible2 = false;
        }
      },
      handleEdit(index, row) {
        // 将数据的index传递过来用于实现数据的回显
        this.form = this.tableData[index];
        this.currentIndex = index;
        // 设置对话框的可见
        this.dialogFormVisible2 = true;
      },
      handleDelete(index, row) {
        // 设置类似于console类型的功能
        this.$confirm("永久删除该文件, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(() => {
            // 移除对应索引位置的数据，可以对row进行设置向后台请求删除数据
            this.tableData.splice(index, 1);
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      },
      cancel() {
        // 取消的时候直接设置对话框不可见即可
        this.dialogFormVisible = false;
        this.dialogFormVisible2 = false;
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }

    },

    computed: {
      tables() {
        const input = this.input;
        if (input) {
          return this.tableData.filter(data => {    //filter创建一个新的数组，检查所有元素
            return Object.keys(data).some(key => {   //some用于检测数组中的元素是否符合条件
              // toLowerCase：转成小写    indexof用于返回首次出现的位置
              return String(data[key]).toLowerCase().indexOf(input) > -1;
            })
          })
        }
        return this.tableData;
      }
    }

  }
</script>

<style>
  .header {
    width: 100%;
    display: flex;
  }

  .addInput {
    width: 90%;
    margin-right: 20px;
  }
</style>
